import React, { useEffect, useState } from 'react'
import { Table, Input, InputNumber,  Form } from 'antd'
import RoleModal from '@/pages/system/role/roleModal'
import {getRole} from '@/api/role'

interface Item {
  key: string;
  name: string;
  age: number;
  address: string;
}

const originData: Item[] = [];
for (let i = 0; i < 100; i++) {
  originData.push({
    key: i.toString(),
    name: `Edrward ${i}`,
    age: 32,
    address: `London Park no. ${i}`,
  });
}
interface EditableCellProps extends React.HTMLAttributes<HTMLElement> {
  editing: boolean;
  dataIndex: string;
  title: any;
  inputType: 'number' | 'text';
  record: Item;
  index: number;
  children: React.ReactNode;
}

const EditableCell: React.FC<EditableCellProps> = ({
                                                     editing,
                                                     dataIndex,
                                                     title,
                                                     inputType,
                                                     record,
                                                     index,
                                                     children,
                                                     ...restProps
                                                   }) => {
  const inputNode = inputType === 'number' ? <InputNumber /> : <Input />;

  return (
    <td {...restProps}>
      {editing ? (
        <Form.Item
          name={dataIndex}
          style={{ margin: 0 }}
          rules={[
            {
              required: true,
              message: `Please Input ${title}!`,
            },
          ]}
        >
          {inputNode}
        </Form.Item>
      ) : (
        children
      )}
    </td>
  );
};
//添加角色



const role = () => {
  const [form] = Form.useForm();
  const [data, setData] = useState([]);


  useEffect( ()=>{

      const getRoleHttp = async () => {
          const res = await getRole()
        console.log(res)
        return res
      }
    getRoleHttp().then(res => {
      setData(()=>res)
    })

  },[])





  const columns = [
    {
      title: '角色名称',
      dataIndex: 'role_name',
      width: '25%',
      editable: true,
    },
    {
      title: '排名',
      dataIndex: 'id',
      width: '15%',
      editable: true,
    },
    {
      title: '权力表',
      dataIndex: 'jurisdiction',
      width: '40%',
      editable: true,
    },
    {
      title: 'operation',
      dataIndex: 'operation',
    },
  ];


  return (
    <>
    <Form form={form} component={false}>
    <RoleModal/>
      <Table
        components={{
          body: {
            cell: EditableCell,
          },
        }}
        bordered
        dataSource={data}
        columns={columns}
        rowClassName="editable-row"
        rowKey="id"
      />
    </Form>
    </>
  );
};
export default role
